<template>
  <!-- tc居中 fs-4字体大小为4 p-2边距为2 -->
  <div class="tc fs-4 p-2">cpu信息</div>
  <div>{{}}</div>
  <!-- 表单组件 -->
  <NFlex>
    <!--包裹管理表单控件(输入框) -->
    <NForm inline>
      <NFormItem>
        <NInput v-model:value="queryInfo.cpu" placeholder="请输入cpu" />
      </NFormItem>
      <NFormItem>
        <NInput v-model:value="queryInfo.manufacturer" placeholder="请输入厂商" />
      </NFormItem>

      <!-- NSpace布局组件（默认为横向间距） -->
      <NFormItem>
        <NSpace>
          <NButton type="primary" @click="requery">查询</NButton>
          <NButton type="success" @click="showAdd">添加</NButton>
          <NButton type="success" @click="reset">重置</NButton>
        </NSpace>
      </NFormItem>
    </NForm>
  </NFlex>

  <!-- 数据表格NDataTable -->
  <div>
    <!-- {{ querylist }} -->
    {{ query1 }}
    <NDataTable :loading="queryloading" :data="querylist" :columns="columns"></NDataTable>
  </div>

  <!-- 添加框 -->
  <NModal preset="dialog" v-model:show="avisible" title="添加cpu信息" @after-leave="requery">
    <div>
      <NForm>
        <NFormItem>
          <NInput v-model:value="addInfo.manufacturer" placeholder="请输入厂商" />
        </NFormItem>
        <NFormItem>
          <NInput v-model:value="addInfo.cpu" placeholder="请输入cpu型号" />
        </NFormItem>
        <NFormItem>
          <NInput v-model:value="addInfo.info" placeholder="请输入简介" />
        </NFormItem>
        <NFormItem>
          <NInputNumber v-model:value="addInfo.cores" placeholder="请输入核心数" />
        </NFormItem>
        <NFormItem>
          <NInputNumber v-model:value="addInfo.threads" placeholder="请输入线程数" />
        </NFormItem>
        <NFormItem>
          <NInput v-model:value="addInfo.frequency" placeholder="请输入频率" />
        </NFormItem>
        <NFormItem>
          <NInput v-model:value="addInfo.maxFrequency" placeholder="请输入最高频率" />
        </NFormItem>
        <NFormItem>
          <NDatePicker
            v-model:formatted-value="datainfo"
            format="yyyy-MM-dd"
            :is-date-data="dateValidater"
          >
          </NDatePicker>
        </NFormItem>
      </NForm>
    </div>
    <template #action>
      <NSpace>
        <NButton :loading="addloading" type="primary" @click="add">添加</NButton>
        <NButton @click="avisible = false">关闭</NButton>
      </NSpace>
    </template>
  </NModal>
</template>

<script setup lang="ts">
import { Api } from '@/types/Api'
import type { BaseDataResult, BaseResult, PageVO } from '@/types/BaseResult'
import type { TbCpuInfo } from '@/types/cpu'
import { Tools } from '@/types/Tools'
import { List } from 'echarts'
import {
  NButton,
  useMessage,
  NFlex,
  NFormItem,
  NInput,
  NSpace,
  NDataTable,
  NForm,
  NModal,
  type DataTableColumn,
  NDatePicker,
  NInputNumber,
} from 'naive-ui'
import { onMounted, ref } from 'vue'
const message = useMessage()

//#region 添加

//添加的内容

const datainfo = ref(Tools.concatJson(new Date(),'yyyy-MM-dd'))
const dateValidater = (date: Date) => {
  return date.getTime() < Date.now()
}
const addInfo = ref({} as TbCpuInfo)
// 点击添加按钮后弹出来的框，默认值为false
const avisible = ref(false)
// 转圈圈
const addloading = ref(false)
const selecteMode = ref('query')

const addlist = ref([] as Array<TbCpuInfo>)

const showAdd = () => {
  selecteMode.value = 'add'
  avisible.value = true
}

const add = () => {
  addloading.value = true
  Api.post('/crud/cpuinfo', addInfo.value, (data: BaseResult) => {
    addloading.value = false
    if (data.success) {
      message.success('添加成功')
      avisible.value = false
      return
    }
    message.error(data.message)
  })
}

//#endregion

//#region  查询
const query1 = ref({})
const queryInfo = ref({ pageNumber: 1, pageSize: 10, cpu: '', manufacturer: '' })
const queryloading = ref(false)
const querylist = ref([] as Array<TbCpuInfo>)
const query = () => {
  queryloading.value = true
  Api.get('/crud/cpuinfo', queryInfo.value, (data: BaseDataResult<PageVO<TbCpuInfo>>) => {
    queryloading.value = false
    if (data.success) {
      querylist.value = data.data.list
      query1.value = data.data.pageBean
      return
    }
    message.error(data.message)
  })
}

onMounted(() => {
  query()
})
// 刷新数据
const requery = () => {
  queryInfo.value.pageNumber = 1
  query()
}

// 重置
const reset = () => {
  queryInfo.value = { cpu: '', manufacturer: '' }
  queryInfo.value.pageNumber = 1
  query()
}

const columns = ref([
  {
    title: '型号',
    key: 'cpu',
  },
  {
    title: '厂商',
    key: 'manufacturer',
  },
  {
    title: '简介',
    key: 'info',
  },
  {
    title: '核心数',
    key: 'cores',
  },
  {
    title: '	线程数',
    key: 'threads',
  },
  {
    title: '	频率',
    key: 'frequency',
  },
  {
    title: '	最高频率',
    key: 'maxFrequency',
  },
  {
    title: '	时间',
    key: 'releaseDate',
    render(row) {
      return new Date(row.releaseDate).toLocaleDateString()
    },
  },
] as DataTableColumn<TbCpuInfo>[])

//#endregion
</script>

<style scoped lang="scss"></style>
